<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>日志</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        .layui-mid {
            display: inline-block;
            padding: 9px 0!important;
            line-height: 20px;
            margin: 0 10px;
        }
    </style>
</head>
<body style="padding: 20px 10px;">

<!-- 你的 HTML 代码 -->
<span class="layui-breadcrumb">
  <a href="/index.html">首页</a>
  <a><cite>请求日志</cite></a>
</span>
<div class="demoTable layui-form" style="margin-top: 10px;">
    用户：
    <div class="layui-inline">
        <input class="layui-input" placeholder="搜索用户名称" name="userName" id="userName" autocomplete="off">
    </div>
    ip：
    <div class="layui-inline">
        <input class="layui-input" placeholder="搜索ip地址" name="ip" id="ip" autocomplete="off">
    </div>
    数据源：
    <div class="layui-inline">
        <input class="layui-input" placeholder="搜索数据源" name="datasourceName" id="datasourceName" autocomplete="off">
    </div>
    接口：
    <div class="layui-inline">
        <input class="layui-input" placeholder="搜索接口" name="interfaceName" id="interfaceName" autocomplete="off">
    </div>
    状态：
    <div class="layui-inline">
        <select name="status" id="status" lay-filter="status">
            <option value="1">成功</option>
            <option value="2">失败</option>
        </select>
    </div>
    日期：
    <div class="layui-inline" style="width: 300px;">
        <input type="text" class="layui-input" id="test16" placeholder="开始 到 结束">
    </div>
    <button class="layui-btn" id="demoReloadBtn">搜索</button>
</div>
<table id="demo" lay-filter="test"></table>
<script src="./layui/layui.js"></script>
<script>
layui.use(['element', 'layer', 'laydate', 'table', 'jquery', 'form'], function(){
  var layer = layui.layer;
  var table = layui.table;
  var laydate = layui.laydate;
  var form = layui.form;
  var $ = layui.$;

   laydate.render({
    elem: '#test16'
    ,type: 'datetime'
    ,range: '到'
  });

   //第一个实例
  var tableData = [];
  table.render({
    elem: '#demo'
    ,toolbar: '#toolbarDemo'

    ,url: '/request-log/findPage' //数据用户
    ,method: 'post'
    ,request: {
        pageName: 'pageNum' //页码的参数名称，默认：page
        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
    }
    ,page: true //开启分页
    ,where: {queryModel:{status:1}}
    ,headers: {}
    ,done: function(res, curr, count){
        tableData = res.data;
    }
    ,parseData: function(res){ //res 即为原始返回的数据
        return {
          "code": res.code, //解析用户状态
          "msg": res.msg, //解析提示文本
          "count": res.data.total, //解析数据长度
          "data": res.data.list //解析数据列表
        };
    }
    ,response: {
        statusName: 'code' //规定数据状态的字段名称，默认：code
        ,statusCode: '0000' //规定成功的状态码，默认：0
        ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
        ,countName: 'count' //规定数据总数的字段名称，默认：count
        ,dataName: 'data' //规定数据列表的字段名称，默认：data
    }
    ,contentType: 'application/json'
    ,cols: [[ //表头
      {field: 'id', title: '序号', type: 'numbers', width:80, fixed: 'left'}
      ,{field: 'datasourceName', title: '数据源'}
      ,{field: 'interfaceName', title: '接口'}
      ,{field: 'requestIp', title: 'IP'}
      ,{field: 'userName', title: '用户'}
      ,{field: 'requestTime', title: '请求时间'}
      ,{field: 'status', title: '状态', width: 80, templet: function(d){return d.status == 1 ? "成功" : "失败";}}
      ,{field: 'message', title: '原因'}
    ]]
  });

  $("#demoReloadBtn").click(function(){
    var userName = $("#userName").val();
    var ip = $("#ip").val();
    var datasourceName = $("#datasourceName").val();
    var interfaceName = $("#interfaceName").val();
    var status = $("#status").val();
    var time = $("#test16").val().replace(" 到 ",",");
    table.reload('demo', {where: {queryModel: {userName: userName,
    ip: ip, dataSourceName: datasourceName, interfaceName: interfaceName,
    status: status, time: time}}}, true);
  });

  form.on('select(status)', function(data){
      table.reload('demo', {where: {queryModel: {status: data.value}}}, true);
  });

});
</script>
</body>
</html>